<template>
  <div class="editContainer">
    <el-input class="titleInput" v-model="title" placeholder="请输入文章标题~"></el-input>
    <div>
      <quill-editor style="height: 500px;" ref="myQuillEditor" v-model="content" :options="editorOption"
      ></quill-editor>
      <div class="fixedFooter">
        <el-button @click="submit">发布博客</el-button>
      </div>
    </div>
    <el-dialog
    title="选择模块"
    :visible.sync="visible"
    width="50%">
      <el-select v-model="selectValue" placeholder="请选择">
        <el-option
          v-for="item in moduleoOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <div slot="footer" class="dialog-footer">
        <el-button @click="visible = false">取 消</el-button>
        <el-button type="primary" @click="submitConfirm">确认</el-button>
      </div>
    </el-dialog>
    <el-upload
      class="upload-demo"
      style="display: none;"
      :action="actionPath"
      :headers="headerObj"
      :on-success="quillSuccess"
      :show-file-list="false">
      <el-button class="imageUpload" size="small" type="primary">点击上传</el-button>
    </el-upload>
  </div>
</template>

<script>
export default {
  created () {
    this.$store.commit('setChoose', 'edit')
  },
  beforeRouteEnter (to, from, next) {
    if (!window.sessionStorage.getItem('token')) {
      next((vm) => {
        console.log(vm)
        vm.$message.error('请先登录！')
        vm.$router.push('/login')
      }
      )
    } else {
      next()
    }
  },
  data () {
    return {
      actionPath: `http://127.0.0.1:8000/upload/picture`,
      headerObj: {
        authorization: 'Bearer ' + window.sessionStorage.getItem('token')
      },
      fileList: [],
      selectValue: '',
      moduleoOptions: [
        {
          value: 1,
          label: '交流讨论'
        },
        {
          value: 2,
          label: '面经分享'
        },
        {
          value: 3,
          label: '许愿模块'
        },
        {
          value: 4,
          label: '文章分享'
        }
      ],
      visible: false,
      // 富文本内容
      content: '',
      title: '',
      editorOption: {// 配置

        modules: {

          'emoji-toolbar': true,

          'emoji-textarea': true,

          'emoji-shortname': true,

          toolbar: {

            container: [ // 功能项

              ['bold', 'italic', 'underline'], // 加粗，切斜，下划线

              ['blockquote', 'code-block'],

              [{ 'header': 1 }, { 'header': 2 }], // custom button values

              [{ 'list': 'ordered' }, { 'list': 'bullet' }],

              [{ 'script': 'sub' }, { 'script': 'super' }], // superscript/subscript

              [{ 'indent': '-1' }, { 'indent': '+1' }], // outdent/indent

              [{ 'direction': 'rtl' }], // text direction

              [{ 'size': ['small', false, 'large', 'huge'] }], // custom dropdown

              [{ 'header': [1, 2, 3, 4, 5, 6, false] }],

              [{ 'color': [] }, { 'background': [] }], // dropdown with defaults from theme

              [{ 'font': [] }],

              [{ 'align': [] }],

              ['link', 'image', 'video'],

              ['emoji'],

              ['clean']

            ], // 工具栏

            handlers: {

              emoji: function () { },

              'image': function (value) {
                if (value) {
                  console.log(value)
                  document.querySelector('.imageUpload').click()
                } else {
                  this.quill.format('image', false)
                }
              }

            }

          }

        }

      }
    }
  },
  methods: {
    quillSuccess (response) {
      if (response) {
        console.log(response, 'response')
        // 获取文本编辑器
        const quill = this.$refs.myQuillEditor.quill
        // 获取光标位置
        const pos = quill.getSelection().index
        // 插入图片到光标位置
        quill.insertEmbed(pos, 'image', response.imgUrl)
        this.fileList.push(response.imgUrl)
      } else {
        this.$message.error('图片插入失败')
      }
    },
    async submitConfirm () {
      await this.$http.post('/moment', {title: this.title, content: this.content, module: this.selectValue, mainImage: this.fileList[0]})
      this.$message.success('发布成功！')
      this.$router.push('/discuss')
      this.visible = false
    },
    async submit () {
      if (this.title.trim() === '') {
        return this.$message.error('标题不能为空！')
      }
      if (this.content.trim() === '') {
        return this.$message.error('正文不能为空！')
      }
      this.visible = true
    }
  }
}
</script>

<style scoped>
  .fixedFooter{
    position: fixed;
    height:64px;
    z-index :1000;
    width: 100%;
    bottom: 0px;
    background-color: #f7f8f9;
    display: flex;
    align-items: center;
    justify-content:space-around;
  }
   .editContainer >>> .el-input__inner {
     height: 50px;
  }
  .editContainer >>> .el-input__inner::placeholder{
    font-size: 22px;
  }
  .editContainer .el-input{
    margin: 10px 0;
    font-size: 22px;
  }
</style>
